import React, { useState, ReactText } from 'react';
import ProCard from '@ant-design/pro-card';
import LeftContentComponent from './components/LeftContentComponent';
import MiddleContentComponent from './components/MiddleContentComponent';
import RightMapComponent from './components/RightMapComponent';
export default () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);

  const getSelectRowKeys = (keys: ReactText[]) => {
    setSelectedRowKeys(keys);
  };
  return (
    <ProCard split="vertical">
      <ProCard style={{ marginTop: 2 }} gutter={[4, 4]} wrap split="vertical">
        <ProCard colSpan={{ xs: 24, sm: 12, md: 8, lg: 7, xl: 6 }}>
          <LeftContentComponent getSelectRowKeys={getSelectRowKeys} />
        </ProCard>
        <ProCard colSpan={{ xs: 24, sm: 12, md: 12, lg: 11, xl: 12 }} layout="center">
          <MiddleContentComponent selectedRowKeys={selectedRowKeys} />
        </ProCard>

        <ProCard
          title="所在地址"
          colSpan={{ xs: 24, sm: 12, md: 8, lg: 6, xl: 6 }}
          layout="center"
          bordered
        >
          <RightMapComponent selectedRowKeys={selectedRowKeys} />
        </ProCard>
      </ProCard>
    </ProCard>
  );
};
